$(function () {
    var layer = layui.layer;

    var form = layui.form;
    //初始化获取文章分类的列表
    initArtCateList();
    function initArtCateList() {
        //获取文章的api
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                console.log("文章分类：", res);
                var htmlStr = template('tpl-table', res)//第一个参数是模板的id
                $('#table').html(htmlStr);
                // console.log(htmlStr);
            }
        })
    }

    //为添加类别添加事件 
    var indexAdd = null;
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        });
    });

    //通过代理的形式为form-add绑定事件
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault();
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('新增分类失败！');
                }
                initArtCateList();
                layer.msg('新增分类成功 ！');
                // 根据索引关闭对应的弹出层
                layer.close(indexAdd);
            }
        })
    });


    var indexEdit = null;
    // 通过代理的形式为btn-edit绑定点击事件
    $('#table').on('click', '.btn-edit', function () {
        //弹出修改层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        });

        var id = $(this).attr('data-id');

        // console.log(id);
        // 发起请求获取对应的数据
        $.ajax({
            method: 'GET',
            url: '/my/article/cates/' + id,
            success: function (res) {
                form.val('form-edit', res.data);
            }
        });
    });


    //通过代理的方式为表单绑定修改事件
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault();
        console.log($(this).serialize()) // id=5&name=%E6%99%93%E9%BE%99bb&alias=xiaolong，汉字会被转码
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('更新分类失败！');
                }
                layer.msg('更新分类成功！');
                //关闭弹出层
                layer.close(indexEdit);

                initArtCateList();
            }
        })
    })

    //通过代理的形式为删除按钮绑定事件
    $('body').on('click', '.btn-delete', function () {
        var id = $(this).attr('data-id');
        //提示用户是否删除
        layer.confirm('确认删除？', { icon: 3, title: '提示' }, function (index) {
            //do something
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg('删除分类失败!');
                    }
                    layer.msg('删除分类成功!');
                    //关闭层
                    layer.close(index);
                    //调用方法
                    initArtCateList();
                }
            });
        });
    });
});